// 入口文件
import Vue from "vue"

// 按需引入mint-ui
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
// Vue.component(Header.name,Header)
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);
// 完整导入
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

// 导入mui的样式文件
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'
import './lib/mui/fonts/mui-icons-extra.ttf'

// 引入axios 
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://www.liulongbin.top:3005';
// 其它vue组件可以通过调用this.$axios直接使用了
//全局配置post请求的表单数据格式请求形式//application/x-www-form-urlencoded
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 1.1.引入路由这个包
import VueRouter from 'vue-router'
//1.2. 安装路由
Vue.use(VueRouter)

// 导入格式化插件
import moment from 'moment'
// 定义全局的过滤器
Vue.filter('dateFormat', function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
  return moment(dataStr).format(pattern)
})

// 1.导入全局管理工具
import Vuex from 'vuex'
// 2.在Vue上安装以下
Vue.use(Vuex)

//页面开始加载时，把localstore中的数据提取出来
var car = JSON.parse(localStorage.getItem('car') || '[]')
// 3.创建一个store实例
var store = new Vuex.Store({
  state: {//通过this.$store.state.***调用
    car: car    //car是一个数组，可以存放购物车中商品的数据如{ id: '商品的id',count:'商品的数量'，price:'商品的单价'
    // selected: 'flag(商品的状态)' }
  },
  mutations: {//通过this.$store.commit("方法的名称"，'按需传入唯一的参数')
    addToCar(state, goodsinfo) {
      var flag = false;
      // 判断该商品是否存在car数组中(商品的id是否已经存在)，如果已经存在，只要把goodsinfo中的count数量值加起来就可以了
      // 如果不存在，那直接通过push方法把goodsinfo加到数组中即可
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count += parseInt(goodsinfo.count);
          flag = true;
          return true
        }

      })
      if (!flag) {
        state.car.push(goodsinfo)
      }
      // 商品数量更新完成后将数据保存到本地存储中
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updateGoodsCount(state, goodsinfo) {
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count = parseInt(goodsinfo.count);
          return true
        }
      })
      // 商品数量更新完成后将数据保存到本地存储中
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    removeFormCar(state, id) {
      state.car.some((item, i) => {
        if (item.id == id) {
          state.car.splice(i, 1)
          return true;
        }
        // 删除商品后，将商品数量更新完成后将数据保存到本地存储中
        localStorage.setItem('car', JSON.stringify(state.car))

      })
    },
    updateGoodsSelected(state, info) {
      state.car.some(item => {
        if (item.id == info.id) {
          item.selected = info.selected;
        }
        // 商品状态更新完成后，将商品数据保存到本地存储中
        localStorage.setItem('car', JSON.stringify(state.car))
      })
    }
  },
  getters: { //通过this.$store.getters.***调用
    getAllCount(state) {
      var c = 0;
      state.car.forEach(item => {
        c += item.count;
      })
      return c
    },
    //获取商品列表数量，首先创建一个空对象o ,然后循环遍历数组car中的每一项，将id作为对象0的属性名
    // count作为对应的属性值保存起来，然后返回这个o,通过this.$store.getters.方法名[id值]就可以获取对应商品的数量
    getGoodsCount(state) {
      var o = {};
      state.car.forEach(item => {
        o[item.id] = item.count;
      })
      return o
    },
    getGoodsSelected(state) {
      var o = {};
      state.car.forEach(item => {
        o[item.id] = item.selected;
      })
      return o;
    },
    getGoodsCountAndAmount(state) {
      var o = {
        count: 0,
        amount: 0
      }
      state.car.some(item => {
        if (item.selected) {
          o.count += item.count;
          o.amount += item.price * item.count;
        }
      })
      return o;
    }

  }
})

//导入图片预览插件
import VuePreview from 'vue-preview'
//安装到Vue上
Vue.use(VuePreview)


// 引入app根组件
import app from './App.vue'

// 1.3导入自己的路由模块router.js
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app),
  router,  //1.4将路由对象挂载到vm实例上
  store   //1.4将store对象挂载到vm实例上
})